<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-button size="small" type="primary" @click="addPages">添加页面</el-button>
          </el-col>
          <el-col>
            <el-input v-model="input" placeholder="请输入关键字">
              <el-button slot="append" icon="el-icon-search" @click="seek" />
            </el-input>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-table
            :data="PagesList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="title"
              label="标题"
              width="200px"
            />
            <el-table-column
              prop="content"
              label="内容"
            >
              <template v-slot="{row}">
                <div
                  style="overflow-x: hidden;max-height: 200px;"
                  v-html="row.content"
                />
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              style="min-width:150px"
            >
              <template #default="{row}">
                <el-button type="primary" size="small" @click="editPages(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delPages(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-pagination
            :current-page.sync="page"
            :page-sizes="[2, 4, 8, 16]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
    <handleDialog ref="handleDialog" :is-show-dislog.sync="isShowDislog" />
  </div>
</template>

<script>
import handleDialog from './components/handleDialog.vue'
import { getPagesApi, delPagesApi, getPagesCounApi } from '@/api/page'
export default {
  components: {
    handleDialog
  },
  data() {
    return {
      page: 1, // 显示第几页
      pageSize: 2, // 每页显示条数
      total: 0, // 总条数
      input: '',
      title: '',
      PagesList: [],
      isShowDislog: false
    }
  },
  created() {
    this.getPages()
    this.getPagesCoun()
  },
  methods: {
    // 每页条数改变触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryPages()
    },
    // 页面改变触发
    handleCurrentChange(val) {
      this.page = val
      this.queryPages()
    },
    // 搜索
    seek() {
      this.page = 1
      this.title = this.input
      this.queryPages()
      this.getPagesCoun()
    },
    // 查询
    async queryPages() {
      const res = await getPagesApi({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize, title_contains: this.title })
      this.PagesList = res
      // console.log(res)
    },
    // 获取总条数
    async getPagesCoun() {
      const res = await getPagesCounApi({ title_contains: this.title })
      // console.log(res)
      this.total = res
    },
    // 新增
    async addPages() {
      this.isShowDislog = true
    },
    // 编辑
    async editPages(id) {
      await this.$refs.handleDialog.getPage(id)
      this.isShowDislog = true
    },

    // 删除
    async delPages(id) {
      if (this.page > 1 && this.PagesList.length === 1) {
        this.page--
      }
      // console.log(id)
      await delPagesApi(id)
      this.$message.success('删除成功')

      // 重新获取数据
      this.queryPages()
      this.getPagesCoun()
    },

    // 获取分类列表
    async getPages() {
      const res = await getPagesApi({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize })
      console.log(res)
      this.PagesList = res
    }

  }

}
</script>

<style>
div{

}
</style>
